<template>
	<view class="order-details">
		<view class="details-container" v-if="details">
			<view class="card">
				<view class="item">
					<view class="label">订单编号</view>
					<view class="value">{{ details.order_no }}</view>
				</view>
				<view class="item">
					<view class="label">工人类型</view>
					<view class="value">{{ details.job_type_id[0] ? details.job_type_id[0].name : "" }}</view>
				</view>
				<view class="item">
					<view class="label">订单状态</view>
					<view class="value status-{{ details.status }}">{{ statusMap[details.status].name }}</view>
				</view>
				<view class="item">
					<view class="label">订单备注</view>
					<view class="value">{{ details.supplement }}</view>
				</view>
				<view class="item">
					<view class="label">预估金额</view>
					<!-- 假设这里应该显示预估金额，修正原数据绑定错误 -->
					<view class="value">{{ details.estimated_amount || "暂无" }}</view>
				</view>
				<view class="item">
					<view class="label">地&emsp;&emsp;址</view>
					<view class="value">{{ details.address }}</view>
				</view>
			</view>
			<!-- 新增取消订单按钮，仅在订单状态允许取消时显示 -->
			<view v-if="canCancelOrder" class="cancel-btn-container">
				<uv-button type="error" shape="circle" @click="handleCancelOrder">取消订单</uv-button>
			</view>
		</view>
		<uv-empty v-else text="暂无数据"></uv-empty>
		<uni-pay ref="uniPayRef" mainColor="#f6d44c" returnUrl="/pages/order-details/order-details"></uni-pay>
	</view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import autobackToast from "@/utils/autobackToast.js";

const orderCloud = uniCloud.importObject("job-order");

const db = uniCloud.database().collection("order,job-type");

const uniPayRef = ref();

const details = ref();

const query = defineProps({
	order_no: String
});

const statusMap = ref([
	{
		name: "全部",
		value: "all"
	},
	{
		name: "进行中",
		value: 0
	},
	{
		name: "待支付",
		value: 1
	},
	{
		name: "待评价",
		value: 2
	},
	{
		name: "已完成",
		value: 3
	},
	{
		name: "已取消",
		value: 4
	}
]);

// 计算属性判断订单是否可取消，假设状态 1（待支付）可取消
const canCancelOrder = computed(() => details.value && details.value.status === 0);

const handleGetOrderDetails = async () => {
	const { result } = await db.where(`order_no == "${query.order_no}"`).get();
	if (result.code == 0 && result.data.length > 0) {
		details.value = result.data[0];
		console.log(details.value);
	} else {
		autobackToast("无此订单");
	}
};

// 取消订单方法
const handleCancelOrder = async () => {
	uni.showModal({
		title: "确认取消",
		content: "确定要取消该订单并退款吗？",
		success: async (res) => {
			if (res.confirm) {
				try {
					const a = await orderCloud.cancel({
						id: details.value._id
					});
					console.log(a);
					return;
					const refundResult = await uniPayRef.value.refund({
						out_trade_no: `${details.value.order_no}-trade` // 插件支付单号
					});
					console.log(refundResult);
					return;
					if (result.errCode === 0) {
						autobackToast("订单取消成功，退款已处理");
						// 重新获取订单详情
						await handleGetOrderDetails();
					} else {
						autobackToast("订单取消失败，请稍后重试");
					}
				} catch (error) {
					console.error("取消订单出错:", error);
					autobackToast("订单取消出错，请稍后重试");
				}
			}
		}
	});
};

onShow(() => {
	handleGetOrderDetails();
});
</script>

<style lang="scss" scoped>
.order-details {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.details-container {
	.card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.item {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.label {
			width: 200rpx;
			color: #666;
		}

		.value {
			flex: 1;
		}

		// 根据不同状态显示不同颜色
		&.status-0 .value {
			color: #1890ff;
		}

		&.status-1 .value {
			color: #faad14;
		}

		&.status-2 .value {
			color: #2fc25b;
		}

		&.status-3 .value {
			color: #52c41a;
		}

		&.status-4 .value {
			color: #ff4d4f;
		}
	}
}

.cancel-btn-container {
	margin-top: 20rpx;
	text-align: center;
}
</style>
